<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"  charset="utf-8"></script>
</head>
<body>
    <div style="display: inline-block; width: 180px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
  <ul id="demo1"></ul>
</div>
</body>
<script>
//Demo
layui.use(['tree', 'layer'], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: '#demo1' //指定元素
    ,target: 'mainFrame' //是否新选项卡打开（比如节点返回href才有效）
    ,click: function(item){ //点击节点回调
      
      console.log(item);
    }
    ,nodes: [
     //节点
     {
        name:'管理员'
        ,id:4
        ,alias:'yonghuming'
        ,children:[
          {
            name:'管理员添加'
            ,id:51
            ,href:'guanliyuan.php'
            ,alias:'tianjia'

          },{
            name:'管理员列表',
            id:'52',
            href:'guanliyuan_list.php'
          }
        ]
     },
     {
        name:'幻灯片管理'
        ,id:6
        ,alias:'huandengpian'
        ,children:[
          {
            name:'幻灯片添加'
            ,id:61
            ,href:'slide_add.php'
            ,alias:'tianjia'

          },{
            name:'幻灯片列表',
            id:'52',
            href:'slide_list.php'
          }
        ]
     }
     ,

      {
        name: '添加新闻'
        ,id: 1
        ,alias: 'changyong'
        ,children: [
          {
            name: '新闻添加'
            ,id: 11
            ,href: 'xinwen.php'
            ,alias: 'weidu'
          }, {
            name: '新闻列表'
            ,id: 12
            ,href:'xinwenlist.php'
          }
        ]
      }, {
        name: '网站信息/留言信息'
        ,id: 2
        
        ,children: [
          {
            name: '网站信息'
            ,id: 21
            
            

            ,children: [
              {
                name: '网站基本信息添加'
                ,id: 211
                ,href:'wangzhan.php'
              }, {
                name: '网站基本信息列表'
                ,id: 212
                ,href:'wangzhanlist.php'
              }
            ]
          }, {
            name: '留言管理'
            ,id: 22
            ,children: [
              {
                name: '留言列表'
                ,id: 221
                ,href:'liuyanlist.php'
              }
            ]
          }
        ]
      }
      ,{
        name: '前台/退出'
        ,id: 3
        ,alias: 'changyong'
        ,children: [
          {
            name: '前台'
            ,id: 31
            ,href:'index.php'
            ,alias: 'love'
          }, {
            name: '退出/注销'
            ,id: 12
             ,href:'loginout.php'
          }
        ]
      }
    ]
  });
  
  
  //生成一个模拟树
  var createTree = function(node, start){
    node = node || function(){
      var arr = [];
      for(var i = 1; i < 10; i++){
        arr.push({
          name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
        });
      }
      return arr;
    }();
    start = start || 1;  
    layui.each(node, function(index, item){  
      if(start < 10 && index < 9){
        var child = [
          {
            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
          }
        ];
        node[index].children = child;
        createTree(child, index + start + 1);
      }
    });
    return node;
  };
 
  layui.tree({
    elem: '#demo2' //指定元素
    ,nodes: createTree()
  });
  
});
</script>

</html>